<template>
    <el-dialog width="26vw" class="flex-dialog" :modelValue="info.visible" @close="handleClose"  >
        <template #header>
            <div style="font-size:var(--18FontSize); font-weight:500; color:#525866;">处理待整改项</div>
        </template>
        <el-form ref="myForm" class="flex-form" :model="form" :rules="rules" label-position="top">
            <el-form-item label="处理状态" prop="rectifyStatus">
                <FlexSelect :payload="statusList" :data="statusOpt" :form="form" />
            </el-form-item>
            <el-form-item label="整改说明" prop="rectifyExplanation">
                <FlexInput :data="{ paramKey:'rectifyExplanation', type:'textarea' }" :form="form" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div style="display:flex; gap:var(--mPadding); ">
                <div class="flex-btn middle opacity" style="flex:1;" @click="handleClose">取消</div>
                <div class="flex-btn middle" style="flex:1;" @click="handleSubmit">确认</div>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
    import { watch, ref, reactive, nextTick, onUnmounted } from 'vue';
    import { addOrUpdateCorrection } from '@/api/correction.js';
    import { ElMessage } from 'element-plus';
    import FlexInput from '@/components/FlexInput.vue';
    import FlexSelect from '@/components/FlexSelect.vue';
    import { useGlobalStore } from '@/stores/global';
    const global = useGlobalStore();
    const props = defineProps({
        info:{ type:Object },
    });
    const statusList = [{ label:'不需要整改', key:2 }, { label:'已完成', key:3  }];
    const statusOpt = { paramKey:'rectifyStatus', fullWidth:true };
    const emit = defineEmits(['update:visible', 'refresh']);
    const myForm = ref(null);
    const form = reactive({
        rectifyStatus:'',
        rectifyExplanation:''
    });
    const rules = reactive({
        rectifyStatus:[{ required:true, message:'请操作',  trigger:'blur' }],
    });
    // 重置状态
    function handleClose(){
        Object.keys(form).forEach(key=>{
            form[key] = '';
        })
        myForm.value.clearValidate();
        emit('update:info', { visible:false } );
    }
    function handleSubmit(){
        myForm.value.validate(valid=>{
            if ( valid ) {
                let obj = { ...form, rectifyId:props.info.row.rectifyId };
                addOrUpdateCorrection(obj, true)
                .then(res=>{
                    if ( res.data.code === 200 ) {
                        ElMessage({
                            type:'success',
                            message:'处理整改成功!'
                        });
                    }
                    handleClose();
                    emit('refresh');
                })
            }
        }) 
    }
    
</script>
